import React from 'react';
import { toJS } from 'mobx';
import { ActivityIndicator, Result, Icon, Tools } from 'weaver-mobile';

const getLabel = Tools.getLabel;
/* Loading 页面 */
export const renderLoading = (
  <div className='cowork-loading'>
    <div className='cowork-loading-content'>
      <ActivityIndicator />
      <div style={{ marginTop: 8 }}>loading...</div>
    </div>
  </div>
);

/* 暂无数据 页面 */
export const renderNoData = (
  <div className='cowork-noData'>
    <Result
      img={<Icon type="no-data" />}
      message={getLabel(83553, '暂无数据')}
    />
  </div>
);

export const renderIsTop = (
  <span className='cowork-top'>top</span>
)

export const renderOver = (
  <span className='cowork-over'>over</span>
)

export const renderEnd = (
  <span className='cowork-end'>end</span>
)

export const renderHide = (
  <span className='cowork-hide'>hide</span>
)

/* 暂无权限 页面 */
export const renderNoPermission = (
  <div className='cowork-noPermission'>
    <Result
      img={<Icon type='wuquanxian' />}
      message={getLabel(382663, '暂无权限')}
    />
  </div>
)

/* 待审批无权限页面 */
export const renderNoApprove = (
  <div className='cowork-noApprove'>
    <Result
      img={<Icon type='wuquanxian' />}
      message={<div>
                <p style={{color: 'red'}}>{getLabel('513538','该协作正处于待审批状态')}</p>
                <p>{getLabel('513539','您不是协作管理员，暂无权限查看')}</p>
              </div>}
    />
  </div>
)

/* 协作已删除 页面 */
export const renderDelete = (
  <div className='cowork-detele'>
    <Result
      message={getLabel(383035, '该协作已被删除')}
    />
  </div>
);

export let getTemplateBasicItemToHtml = (curCls, title, name) => (
  <div className={`${curCls}-item`}>
    <div className={`${curCls}-item-left`}>{title}:</div>
    <div className={`${curCls}-item-right`} dangerouslySetInnerHTML={{__html:name}}></div>
  </div>
)

export let getTemplateBasicItemIsTop = (curCls, title, name, isTop) => (
  <div className={`${curCls}-item`}>
    <div className={`${curCls}-item-left`}>{title}:</div>
    <div className={`${curCls}-item-right`}>{name}{isTop === '1' && renderIsTop}</div>
  </div>
);

export let getTemplateLinkItem = (curCls, title, name, id) => ( // todo: a链接点击事件
  <div className={`${curCls}-item`}>
    <div className={`${curCls}-item-left`}>{title}:</div>
    <div className={`${curCls}-item-right`}>
      <a /* onClick={(e) => {e.stopPropagation();}} */>{name}</a>
    </div>
  </div>
)

export let getTemplateBasicItem = (curCls, title, name, id) => (
  <div className={`${curCls}-item`}>
    <div className={`${curCls}-item-left`}>{title}:</div>
    <div className={`${curCls}-item-right`}>{name}</div>
  </div>
)

/* 相关文档等渲染 */
export const getAttachContent = (type, list, attachClick) => {
  const curCls = 'cowork-detail-content-list';
  const stopProp = (e) => {
    if (e) {
      if (e.stopPropagation) e.stopPropagation();
      if (e.preventDefault) e.preventDefault();
      if (e.nativeEvent) e.nativeEvent.preventDefault();
    } else if (window.event) {
      window.event.cancelBubble = true;
    }
  }
  if (toJS(list).length > 0 ) {
    return toJS(list).map((item, index) => {
      return (
        <div className={curCls} key={`${type}-${Math.random().toString(36).substr(2, 6)}`}>
          <span className={`${curCls}-icon`}>{index === 0 && <Icon type={type} />}</span>
          <a className={`${curCls}-name`} onClick={e => {stopProp(e); attachClick(type, item)}}>{item.name}</a>
        </div>
      )
    })
  }
}
